<template>
    <div class="content">
        <div class="title-item">
            <span>全市复工复产</span>
        </div>
        <div class="chart-div">
            <div id="qsfgfc1" class="chart-item-1"></div>
            <div id="qsfgfc2" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>工业行业复工复产</span>
        </div>
        <div class="chart-div">
            <div id="gyhyffc" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item" v-if="xsplzcModel === '1'">
            <span>限上批零住餐</span>
        </div>
        <div class="chart-div" v-if="xsplzcModel === '1'">
            <div id="xsplzc" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>项目进度</span>
        </div>
        <div class="chart-div">
            <div id="xmjd" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>中小企业行业开工复工</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="1">
                   行业名称
                </van-col>
                <van-col span="1">
                    企业数
                </van-col>
                <van-col span="1">
                    开复工数
                </van-col>
                <van-col span="1">
                    开复工率
                </van-col>
                <van-col span="1">
                    当日新增
                </van-col>
            </van-row>
            <van-row class="table-item" v-for="(item,index) in zxqyfgList" :key="index">
                <van-col span="1">
                    {{item.hname}}
                </van-col>
                <van-col span="1">
                    {{item.num}}
                </van-col>
                <van-col span="1">
                    {{item.back_num}}
                </van-col>
                <van-col span="1">
                    {{item.back_rate}}
                </van-col>
                <van-col span="1">
                    {{item.today_add}}
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item" v-if="gyzxqykgfgModel === '1'">
            <span>工业中小企业开工复工</span>
        </div>
        <div class="chart-div" v-if="gyzxqykgfgModel === '1'">
            <div id="gyzxqykgfg" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>项目安排</span>
        </div>
        <div class="chart-div">
            <div id="xmap" class="chart-item"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>春耕备耕农资</span>
        </div>
        <div class="chart-div">
            <div id="cgbg" class="chart-item"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>春耕备耕贷款</span>
        </div>
        <div class="chart-div">
            <div id="cgbgdk" class="chart-item"></div>
            <div class="divider"></div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { Dialog } from 'vant'
import { gyfgfcList, xsplzcList, xmjdaList, zxqyfgList, cgbehkList, cgbggzList, getfcnoeList, getfctwoList, getxmapList, gzyfgList } from '@/api/resumption-work'
export default {
  name: 'index',
  data () {
    return {
      list: [],
      zxqyfgList: [],
      xsplzcModel: '0',
      gyzxqykgfgModel: '0'
    }
  },
  methods: {
    qsfgfc (data1, data2) {
      let array1 = data2.splice(0, 2)
      let array2 = data2.slice(-2)
      console.log(array1)
      console.log(array2)
      let myChart = echarts.init(document.getElementById('qsfgfc1'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'item',
          formatter: ' {b}<br/>{c}  ({d}%) '
        },
        legend: [
          {
            x: 'center',
            bottom: '30',
            data: array1
          },
          {
            x: 'center',
            bottom: '10',
            data: array2
          }
        ],
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            data: data1,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    qsfgfc2 (data1, data2) {
      let array1 = data2.splice(0, 2)
      let array2 = data2.slice(-2)
      let myChart = echarts.init(document.getElementById('qsfgfc2'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'item',
          formatter: ' {b}<br/>{c}  ({d}%) '
        },
        legend: [
          {
            x: 'center',
            bottom: '30',
            data: array1
          },
          {
            x: 'center',
            bottom: '10',
            data: array2
          }
        ],
        color: [ '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            data: data1,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    gyhyffc (data1, data2) {
      let myChart = echarts.init(document.getElementById('gyhyffc'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (param) {
            let txt = `${param[0].axisValue}<br / > `
            param.forEach(item => {
              txt += `${item.seriesName} :
                      ${item.seriesName === '复工率' ? (item.value) * 100 + '%' : item.value}  <br / >`
            })
            return txt
          }
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '13%',
          top: '8%',
          containLabel: true
        },
        legend: {
          data: ['复工数', '复工率'],
          bottom: 10
        },
        xAxis: [
          {
            type: 'category',
            data: data1,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            axisLabel: {
              formatter: function (param) {
                return `${param * 100} %`
              }
            }
          }
        ],
        series: [
          {
            name: '复工数',
            type: 'bar',
            data: data2.fg_num
          },
          {
            name: '复工率',
            type: 'line',
            yAxisIndex: 1,
            data: data2.fg
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    xsplzc (data1, data2) {
      let myChart = echarts.init(document.getElementById('xsplzc'))
      let option = {
        legend: {
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '13%',
          top: '10%',
          containLabel: true
        },
        tooltip: {},
        // dataset: {
        //   source: [
        //     ['product', '批发', '餐饮', '住宿', '零食'],
        //     ['03-11', 43.3, 85.8, 93.7, 93.7],
        //     ['03-12', 83.1, 73.4, 55.1, 93.7],
        //     ['03-13', 86.4, 65.2, 82.5, 93.7],
        //     ['03-14', 72.4, 53.9, 39.1, 93.7]
        //   ]
        // },
        xAxis: { type: 'category', data: data1 },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: data2
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    xmjd (data1, data2) {
      let myChart = echarts.init(document.getElementById('xmjd'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['目标数', '储备数', '开工数'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '13%',
          top: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data1
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '目标数',
            type: 'bar',
            data: data2.list1,
            color: '#37a2da'
          },
          {
            name: '储备数',
            type: 'bar',
            data: data2.list2,
            color: '#67e0e3'
          },
          {
            name: '开工数',
            type: 'bar',
            data: data2.list3,
            color: '#ffdb5c'
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    gyzxqykgfg (data1, data2) {
      let myChart = echarts.init(document.getElementById('gyzxqykgfg'))
      let option = {
        legend: {
          bottom: 10,
          data: ['规上复工率', '规下复工率']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '13%',
          top: '10%',
          containLabel: true
        },
        tooltip: {},
        xAxis: { type: 'category',
          data: data1,
          axisPointer: {
            type: 'shadow'
          } },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            name: '规上复工率',
            type: 'bar',
            data: data2.gsfgl
          },
          {
            name: '规下复工率',
            type: 'bar',
            data: data2.gxfgl
          }
        ]
      }
      myChart.setOption(option)
    },
    cgbg (data1, data2) {
      let myChart = echarts.init(document.getElementById('cgbg'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '17%',
          top: '10%',
          containLabel: true
        },
        legend: {
          bottom: 10,
          left: '23%',
          right: '24%',
          data: ['需求量', '已备量', '入户量', '入户率', '同期入户率']
        },
        xAxis: [
          {
            type: 'category',
            data: data1,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // min: 0,
            // max: 250,
            // interval: 50,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            // min: 0,
            // max: 25,
            // interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '需求量',
            type: 'bar',
            color: '#37a2da',
            data: data2.requirement
          },
          {
            name: '已备量',
            type: 'bar',
            color: '#32c5e9',
            data: data2.prepared_quantity
          },
          {
            name: '入户量',
            type: 'bar',
            color: '#67e0e3',
            data: data2.household_volume
          },
          {
            name: '入户率',
            type: 'line',
            yAxisIndex: 1,
            color: '#9fe6b8',
            data: data2.household_rate
          },
          {
            name: '同期入户率',
            type: 'line',
            yAxisIndex: 1,
            color: '#ffdb5c',
            data: data2.household_rate_last_year
          }
        ]
      }

      myChart.setOption(option)
    },
    cgbgdk (data1) {
      let myChart = echarts.init(document.getElementById('cgbgdk'))
      let option = {
        title: {
          subtext: '贷款需求' + data1.dkxq + '亿',
          left: 0
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          data: ['已贷款', '未贷款']
        },
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              { value: data1.ydk, name: '已贷款' },
              { value: data1.wdk, name: '未贷款' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    xmap (data1, data2) {
      let myChart = echarts.init(document.getElementById('xmap'))
      let option = {
        tooltip: {},
        legend: {
          data: ['目标', '储备', '开工'],
          bottom: 10
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: data1,
          radius: 100,
          center: ['50%', '45%']
        },
        series: [{
          name: '目标 vs 储备 vs 开工',
          type: 'radar',
          // areaStyle: {normal: {}},
          data: data2
        }]
      }
      myChart.setOption(option)
    },
    init () {
      gzyfgList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          const data1 = []
          let data2 = { gsfgl: [], gxfgl: [] }
          list.forEach(item => {
            if (item.gsfgl && item.gxfgl) {
              data1.push(item.imp_date)
              data2.gsfgl.push(item.gsfgl)
              data2.gxfgl.push(item.gxfgl)
            }
          })
          if (data1.length > 0) {
            this.gyzxqykgfgModel = '1'
            this.gyzxqykgfg(data1, data2)
          }
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      gyfgfcList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          let data1 = []
          let data2 = { fg: [], fg_num: [] }
          list.forEach(item => {
            data1.push(item.hy)
            data2.fg.push(item.fg)
            data2.fg_num.push(item.fg_num)
          })
          this.gyhyffc(data1, data2)
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      xsplzcList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          const data1 = new Set()
          let data2 = { }
          list.forEach(item => {
            data1.add(item.imp)
            if (data2[item.type]) {
              data2[item.type].push(item.op)
            } else {
              data2[item.type] = []
              data2[item.type].push(item.op)
            }
          })
          let dataList = []
          for (let item in data2) {
            dataList.push({ type: 'bar', name: item, data: data2[item] })
          }
          if (dataList.length > 0) {
            this.xsplzcModel = true
            this.xsplzc(Array.from(data1), dataList)
          }
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      xmjdaList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          let data1 = []
          let data2 = { list1: [], list2: [], list3: [] }
          list.forEach(item => {
            data1.push(item.county_name)
            let msgArr = item.msg.split('|')
            data2.list1.push(msgArr[0].substr(0, msgArr[0].length - 1))
            data2.list2.push(msgArr[1].substr(0, msgArr[1].length - 1))
            data2.list3.push(msgArr[2].substr(0, msgArr[2].length - 1))
          })
          this.xmjd(data1, data2)
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      zxqyfgList().then(({ data }) => {
        if (data.errcode === 0) {
          this.zxqyfgList = data.data
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      cgbggzList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          let data1 = []
          let data2 = { prepared_quantity: [], household_rate: [], household_rate_last_year: [], requirement: [], household_volume: [] }
          list.forEach(item => {
            data1.push(item.agricultural_project)
            data2.prepared_quantity.push(item.prepared_quantity)
            data2.household_rate.push(item.household_rate)
            data2.household_rate_last_year.push(item.household_rate_last_year)
            data2.requirement.push(item.requirement)
            data2.household_volume.push(item.household_volume)
          })
          this.cgbg(data1, data2)
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      cgbehkList().then(({ data }) => {
        if (data.errcode === 0) {
          this.cgbgdk(data.data[0])
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      getfcnoeList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          let data1 = []
          let data2 = []
          list.forEach(item => {
            data1.push({ value: item.sj, name: item.lb })
            data2.push(item.lb)
          })
          this.qsfgfc(data1, data2)
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      getfctwoList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          let data1 = []
          let data2 = []
          list.forEach(item => {
            data1.push({ value: item.sj, name: item.lb })
            data2.push(item.lb)
          })
          this.qsfgfc2(data1, data2)
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      getxmapList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          let data1 = []
          let data2 = [
            {
              value: [],
              name: '目标'
            },
            {
              value: [],
              name: '储备'
            },
            {
              value: [],
              name: '开工'
            }
          ]
          list.forEach(item => {
            data1.push({ name: item.county_name, max: 250 })
            data2[0].value.push(item.mb)
            data2[1].value.push(item.cb)
            data2[2].value.push(item.kg)
          })
          this.xmap(data1, data2)
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
    }
    .chart-item-4{
        width: 100%;
        height: 500px;
    }
    .chart-item-1{
        width: 100%;
        height: 240px;
    }
    .chart-item{
        width: 100%;
        height: 300px;
    }
    .chart-item-2{
        width: 100%;
        height: 360px;
    }
    .title-item{
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }
    .title-item span{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
    }
    .table-item:first-child{
        border-top: 1px solid #dddddd;
    }
    .table-item:nth-child(2n+1){
        background: #ffffff;
    }
    .table-div{
        padding: 0 10px;
    }
    .van-col {
        padding: 10px 0;
    }
    .content >>> .van-progress__pivot{
        background-color: initial !important;
        color: #ffffff;
    }
    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag{
        margin-right: 1px;
    }
    .chart-div{
        padding: 0 10px;
    }
    .chart-div .chart-item-4,.chart-div .chart-item-2,.chart-div .chart-item-1,.chart-div .chart-item{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin-top: 10px;
    }
    .van-col.van-col--1{
        width: 20%;
    }
</style>
